<template>
    <div>
        <div class="top_header">
            <wd-header title="单元单词">
                <router-link to="/singlebook" slot="left">
                    <span class="iconfont">&#xe697;</span>
                </router-link>
            </wd-header>
        </div>
        <div class="divide" v-if="commonlist.length>0">
            <wd-navbar v-model="selectedTabId">
                <wd-tab-item tabId="tab1">未学习单词</wd-tab-item>
                <wd-tab-item tabId="tab2">已学习单词</wd-tab-item>
            </wd-navbar>
            <wd-tab-container v-model="selectedTabId" class="tab-container">
                <wd-tab-container-item tabId="tab1">
                    <div class="unlist">
                        <ul
                          v-infinite-scroll="loadData_left"
                          infinite-scroll-distance="10">
                          <transition-group enter-active-class="animated fadeIn">
                            <li v-for="(item,index) in commonlist" @click="un_exp_btn" :key="index" :data-word="item.word" :data-phonetic="item.phonogram" :data-explain="item.word_explain" :data-imgurl="item.img_id" :data-split="item.split" :data-lenovo="item.associate" :data-wordid="item.wordId">
                                <span>{{item.word}}</span>
                                <span>未学习</span>
                            </li>
                          </transition-group>
                        </ul>
                    </div>
                </wd-tab-container-item>
                <wd-tab-container-item tabId="tab2">
                    <div class="hadlist" v-if="hadbuylist.length > 0">
                        <ul>
                            <li v-for="(item,index) in hadbuylist" :key="index" @click="had_exp_btn" :data-word="item.word" :data-phonetic="item.phonogram" :data-explain="item.word_explain" :data-imgurl="item.imgUrl" :data-split="item.split" :data-lenovo="item.associate" :data-wordid="item.wordId">
                                <span>{{item.word}}</span>
                                <span class="iconfont">&#xe6a8;</span>
                            </li>
                        </ul>
                    </div>
                    <div class="nocommit" v-else>
                        <p>您还没有订阅单词，快去订阅吧</p>
                    </div>
                </wd-tab-container-item>
            </wd-tab-container>
        </div>
        <div class="hadbuy" v-else>
            <ul
              v-infinite-scroll="loadData_common"
              infinite-scroll-distance="10">
              <transition-group enter-active-class="animated fadeIn">
                <li v-for="(item,index) in hadbuylist" :key="index" @click="had_buy_btn" :data-word="item.word" :data-phonetic="item.phonogram" :data-explain="item.word_explain" :data-imgurl="item.imgUrl" :data-split="item.split" :data-lenovo="item.associate" :data-wordid="item.wordId" :data-collect="item.collectionType">
                    <span>{{item.word}}</span>
                    <span class="iconfont">&#xe6a8;</span>
                </li>
              </transition-group>
            </ul>
        </div>
    </div>
</template>
<script>

export default {
    name: 'unitwordslist',
    data() {
        return {
            loading: false,
            selectedTabId: 'tab1',
            commonlist: [],
            hadbuylist: [],
            pageIndex_left: 1,
            pageIndex_hadbuy: 1,
            auth: JSON.parse(localStorage.user),
            commonlisturl: 'http://www.jydsapp.com/jydsApi/api/h5/study/getUnitWordList',
            hadbuylisturl: 'http://www.jydsapp.com/jydsApi/api/h5/study/subWordList',
            numberurl: 'http://www.jydsapp.com/jydsApi/api/h5/study/freeWord',
        }
    },
    computed: {
        classid() {
            return this.$store.state.word_singlebookto_unitwordslist_data.classid
        },
        unitid() {
            return this.$store.state.word_singlebookto_unitwordslist_data.unitid
        }
    },
    created() {
        this.getHadBuyData()
        this.getCommonData()
    },
    watch:{
        pageIndex_left(){
            this.getCommonData()
        },
        pageIndex_hadbuy(){
            this.getHadBuyData()
        }
    },
    methods: {
        loadData_left(){
            this.pageIndex_left+=1
        },
        loadData_common(){
            this.pageIndex_hadbuy+=1
        },
        getCommonData() { //获取当前单元单词
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","classId":"${this.classid}","unitId":"${this.unitid}","pageIndex":"${this.pageIndex_left}"}`
            this.fetch({
                method: 'post',
                url: this.commonlisturl,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    let temp = JSON.parse(res.data).unitWordList
                    this.commonlist = this.commonlist.concat(temp)
                } else {
                    console.log(res.message)
                }
            }).catch((err) => {

            })
        },
        getHadBuyData() { // 获取已订阅数据
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","classId":"${this.classid}","unitId":"${this.unitid}","pageIndex":"${this.pageIndex_hadbuy}"}`
            this.fetch({
                method: 'post',
                url: this.hadbuylisturl,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    let temp = JSON.parse(res.data).subWordList
                    this.hadbuylist = this.hadbuylist.concat(temp)
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    console.log(res.message)
                }
            }).catch((err) => {

            })
        },
        un_exp_btn(ev) { //免费订阅次数
            let that = this
            ev = ev || window.event
            let routeData = {
                word: ev.srcElement.dataset.word,
                phonetic: ev.srcElement.dataset.phonetic,
                explain: ev.srcElement.dataset.explain,
                imgurl: ev.srcElement.dataset.imgurl,
                split: ev.srcElement.dataset.split,
                lenovo: ev.srcElement.dataset.lenovo,
                wordid: ev.srcElement.dataset.wordid
            }

            let wordid = ev.srcElement.dataset.wordid
            let str = `{"userPhone":"${that.auth.user.phoneNum}","token":"${that.auth.token}","classId":"${that.classid}","wordId":"${wordid}"}`
            let times = localStorage.freeCount
            that.$MessageBox.confirm({
                text: `您还有${times}次免费查询次数,确认使用吗？`,
                onConfirm(instance) {
                    times--
                    localStorage.freeCount = times
                    if (times > 0) {
                        that.fetch({
                            method: 'post',
                            url: that.numberurl,
                            params: {
                                "paramStr": str
                            }
                        }).then((data) => {

                            let res = data.data
                            if (res.code == 200) {

                                that.$store.commit('saveSingleWordNeedWordData', routeData)
                                that.$router.push('/singleword')

                            } else {
                                console.log(res.message)
                            }
                        }).catch((err) => {

                        })
                    } else {
                        localStorage.freeCount = 0
                        that.$Toast({
                            content: '您的免费次数已用完，请订购本课所有单词'
                        })
                        setTimeout(() => {
                            that.$router.go(-1) //返回订购
                        }, 1000)
                    }
                    instance.open = false
                },
                onCancel(instance) {
                    instance.open = false
                }
            })

        },
        had_exp_btn(ev) { //已经体验
            ev = ev || window.event;
            let routeData = {
                word: ev.srcElement.dataset.word,
                phonetic: ev.srcElement.dataset.phonetic,
                explain: ev.srcElement.dataset.explain,
                imgurl: ev.srcElement.dataset.imgurl,
                split: ev.srcElement.dataset.split,
                lenovo: ev.srcElement.dataset.lenovo,
                wordid: ev.srcElement.dataset.wordid
            }
            this.$store.commit('saveSingleWordNeedWordData', routeData)
            this.$router.push('/singleword')
        },
        had_buy_btn(ev) { //已经购买
            ev = ev || window.event;
            let routeData = {
                word: ev.srcElement.dataset.word,
                phonetic: ev.srcElement.dataset.phonetic,
                explain: ev.srcElement.dataset.explain,
                imgurl: ev.srcElement.dataset.imgurl,
                split: ev.srcElement.dataset.split,
                lenovo: ev.srcElement.dataset.lenovo,
                wordid: ev.srcElement.dataset.wordid,
                collect: ev.srcElement.dataset.collect
            }
            this.$store.commit('saveSingleWordNeedWordData', routeData)
            this.$router.push('/singleword')
        }
    }
}
</script>
<style lang="scss" scoped>
.mugen-scroll{
    text-align: center;
}
.animated {
    animation-duration: .5s;
}

.wd-tab-item.navbar-active {
    color: #fe4f4a;
    border-bottom: .053333rem solid #fe4f4a;
}

.wd-tab-item.navbar-tab-item {
    margin: 0;
}

.top_header{
    position:fixed;
    width: 100%;
    top: 0;
    left: 0;
}
.divide,.hadbuy{
    margin-top: 1.296296rem;
}

.unlist {
    li {
        display: flex;
        justify-content: space-between;
        padding: 0.37037rem;
        border-bottom: 1px solid #eee;
        align-items: center;
        span:nth-child(2) {
            padding: 2px;
            border: 1px solid green;
            border-radius: 3px;
        }
    }
}

.hadlist {
    width: 100%;
    height: 100%;
    li {
        display: flex;
        justify-content: space-between;
        padding: 0.37037rem;
        border-bottom: 1px solid #eee;
        align-items: center;
        .iconfont {
            color: #555;
        }
    }
}

.hadbuy {
    li {
        display: flex;
        justify-content: space-between;
        padding: 0.37037rem;
        border-bottom: 1px solid #eee;
        align-items: center;
        .iconfont {
            color: #555;
        }
    }
}

.nocommit {
    text-align: center;
    margin-top: 50%;
}
</style>
